<template>
  <div>
    <div class="orderInfo-box">
      <p class="info-tit">订单信息</p>
      <div class="tab-box">
        <table>
          <tbody>
              <tr>
                  <td>订单编号:<span>{{orderNumber}}</span></td>
                  <td>订单状态:<span>{{orderStatus}}</span></td>
                  <td>操作人员:<span>{{staff}}</span></td>
                  <td>下单时间:<span>{{orderTime}}</span></td>
              </tr>
              <tr>
                  <td>支付方式:<span>{{payType}}</span></td>
                  <td>订单总价:<span>{{totalPrice}}</span></td>
                  <td colspan="2" v-if="refundTime">退款时间:<span>{{refundTime}}</span></td>
                  <td colspan="2" v-else></td>
              </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- 内容标题 -->
    <div class="content-title">
      <p>数据明细</p>
    </div>
    <div class="tab-box">
      <el-table :data="InformationData" style="width: 100%" :header-cell-style="{ background: '#F2F2F2' }">
        <el-table-column type="index" label="序号"  width="50">
        </el-table-column>
        <el-table-column prop="dishNum" label="菜品编号"> </el-table-column>
        <el-table-column prop="dishName" label="菜品名称" >
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" :formatter="dateFormat" ></el-table-column>
        <el-table-column prop="price" label="单价" > </el-table-column>
        <el-table-column prop="username" label="用户名" > </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>

export default {
  data(){
    return{
      templateId:0,//获取上一个页面传进来的id

      orderNumber:'',
      orderStatus:'',
      staff:'',
      orderTime:'',
      payType:'',
      totalPrice:'',
      refundTime:'',
      InformationData:[
        {
          dishNum:'0000001',
          dishName:'农家小炒肉',
          orderTime:'2020-01-01',
          price:20,
          username:'hero'
        }

      ]
    }
  },
  methods:{
    dateFormat(row, column, cellValue, index) {
            let date = new Date(parseInt(cellValue));
             let date1 = row[column.property];
            if(date1 == undefined || date1==null){
              return '';
            }
            let Y = date.getFullYear() + "-";
            let M = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) + "-" : date.getMonth() + 1 + "-";
            let D =date.getDate() < 10 ? "0" + date.getDate() + " " : date.getDate() + " ";
            let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
            let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
            let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return Y + M + D == "NaN-NaN-NaN" ? "" : Y + M + D + " " + h + m + s;
        },
    getData(){
      this.axios.get('/order/'+this.templateId).then((res)=>{
        let sta=res.data.data;
        this.orderNumber=sta[0].orderNumber;
        let statu=sta[0].orderStatus;
        if(statu==0){
          statu='未付款';
        }else if(statu==1){
          statu='已付款';
        }else if(statu==2){
          statu='已退款'
        }
        this.orderStatus=statu;
        this.staff=sta[0].staff;
        // this.orderTime=sta[0].orderTime;

        let date=new Date(sta[0].orderTime);
        let year=date.getFullYear();
        let month=(date.getMonth()+1)<10?"0"+(date.getMonth()+1):(date.getMonth()+1);
        let day=date.getDate()<10?"0"+date.getDate():date.getDate();
        let hour = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
        let minute = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
        let second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
        let nowTime = year+"-"+month+"-"+day+" "+hour+minute+second;
        this.orderTime=nowTime;

        this.payType=sta[0].payType;
        this.totalPrice=sta[0].totalPrice;
        // this.refundTime=sta[0].refundTime;
        if(sta[0].refundTime!=null){
          let date1=new Date(sta[0].refundTime);
          let year1=date1.getFullYear();
          let month1=(date1.getMonth()+1)<10?"0"+(date1.getMonth()+1):(date1.getMonth()+1);
          let day1=date1.getDate()<10?"0"+date1.getDate():date1.getDate();
          let hour1 = date1.getHours() < 10 ? '0' + date1.getHours() + ':' : date1.getHours() + ':';
          let minute1 = date1.getMinutes()  < 10 ? '0' + date1.getMinutes() + ':' : date1.getMinutes() + ':';
          let second1 = date1.getSeconds() < 10 ? '0' + date1.getSeconds() : date1.getSeconds();
          let nowTime1 = year1+"-"+month1+"-"+day1+" "+hour1+minute1+second1;
          this.refundTime=nowTime1;
        }
        
        console.log(sta);

        this.InformationData=sta;
      })
    }
  },
  mounted(){
     this.templateId=this.$route.query.id;
     console.log( this.templateId)
     this.getData();
  }
}
</script>

<style lang="less" scoped>
   *{
    font-family: "微软雅黑";
    font-weight: 400;
    font-size: 1.4rem;
    }
    .orderInfo-box{
      background: #fff;
      .info-tit{
            display: block;
            font-weight:normal;
            font-size: 1.6rem;
            font-style:normal;
            height: 4.5rem;
            display: flex;
            align-items: center;
            padding-left: 2rem;
            background:#F2F2F2;
            border-bottom: 1px solid #dbe0e9; 
      }
      .tab-box{
        padding: 2rem 3.5rem;
        table{
          width: 100%;
          border-collapse: collapse; 
          border-spacing: 0;
        }
        table tbody td{
          width: 20%;
          height: 40px;
          border: 1px solid #E0E2FA;
          padding-left: 10px;
          font-family: 'ArialMT', 'Arial';
          font-weight: 400;
          font-style: normal;
          font-size: 13px;
          line-height: normal
        }
      }
    }
        // 内容标题
  .content-title{
    display: flex;
    align-items: center;
    border: 0.1rem solid #dbe0e9;
    margin-top: 1rem;
    height: 4.5rem;
    background:#F2F2F2;
    padding:0 2rem;
    p{
      font-size: 1.6rem;
    }
  }

  // 表格样式
  .tab-box{
    padding:  1.5rem;
    border: 0.1rem solid #dbe0e9;
    background: #fff;
    border-top:none;
    .el-table{
      border: 0.1rem solid #dbe0e9;
    }
    /deep/.el-table td, .el-table th{
      padding: 0.5rem 0;
      
    }
    // 表格数据居中
    /deep/.el-table .cell, .el-table--border td:first-child .cell, .el-table--border th:first-child .cell{
      text-align: center;
    }
  }
</style>